<template>
    <div class="main">
        <!-- 顶部导航（组件复用） -->
        <!-- <my-top-nav></my-top-nav> -->

        <!-- 中部内容 -->
        <div class="center_context" style="height: calc(100vh - 70px)">

            <!--地图：精彩内容开始-->
            <div class="map-display" id="mapDiv">
            </div>
            <!--“整饰”-->
            <div class="tool-item-panel mapDecorateTools" id="mapDecorateTools" :class="{ 'layer-hide': decoratePanelVisible }"
                data-toolPanel-title="Decorate">
                <div class="map-tool-item" id="CoordinateDisplay" title="坐标" @click="coordinateShow = !coordinateShow">
                    <img src="../assets/images/map_icons/Coordinate.png">
                    <span>坐标</span>
                </div>
                <div class="map-tool-item" id="ScaleDisplay" title="比例尺" @click="scaleShow = !scaleShow">
                    <img src="../assets/images/map_icons/Scale.png">
                    <span>比例尺</span>
                </div>
            </div>
            <!--坐标与比例尺-->
            <div class="coordinateAndScaleBar">
                <!--地图比例尺-->
                <div id="scaleBarDiv" class="map-scalebar" v-show="scaleShow">
                    <div id="scaleBar"></div>
                </div>
                <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
                <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position" v-show="coordinateShow">
                </div>
            </div>

            <!-- 地图左上角按钮栏 -->
            <div id="myToolBtns" class="mytool-btns">
                <!-- 按钮组 -->
                <div id="buttonDiv" style="float: left;">
                    <!-- 地图整饰控制按钮 -->
                    <div class="navbtn-items" v-if=decorateShow @click="togglePanel('decoratePanelVisible', 'decorateFlag')"
                        title="地图整饰控制" id="decorateBtn">
                        <img src="../assets/images/map_icons/Decorate.png">
                        <img v-show="decorateFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                </div> <!-- buttonDiv结束 -->
            </div> <!-- myToolBtns结束 -->

            <!-- 气泡（信息窗口） -->
            <div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-content"></div>
            </div>

        </div> <!-- 中部内容结束 -->
    </div> <!-- 最外层Div结束 -->
</template>

<script>

import 'ol/ol.css';
import { Map, View } from 'ol';
import { defaults, Attribution, Zoom, ZoomSlider, ZoomToExtent, OverviewMap, ScaleLine, MousePosition } from 'ol/control';
import { createStringXY } from 'ol/coordinate';
import { XYZ, Vector } from 'ol/source';
import { Tile, Vector as lVector } from 'ol/layer';


export default {
    name: 'economic',
    components: {
        // MyTopNav: TopNav
    },
    props: {
        /*mapCtrlTools:{
            type:Array,
            default:function () {
                return []
            }
        },
        lyrdata: {
            type: Array,
            default: []
        },
        mapParams: {
            type: Object,
            default: {}
        },*/
    },
    data() {
        return {
            myZoomExtent: [70, 22, 110, 55],
            /**功能组按钮控制**/
            decorateShow: true,//鹰眼-功能启动图标按钮，默认false不显示

            /**地图各悬浮面板的可视状态**/
            coordinateShow: true, //2D坐标,默认false不显示
            scaleShow: true, //显示比例尺,默认false不显示
            decoratePanelVisible: true, //默认true为隐藏
            /*选中显示红色小标志*/
            decorateFlag: false, //鹰眼选中显示红色小标志，默认false为隐藏
        }
    },
    methods: {
        //切换面板功能函数
        togglePanel(attr, attr2) {
            this[attr] = !this[attr];
            this[attr2] = !this[attr2];
        },

        //地图初始化方法
        InitMap() {
            let that = this;

            //初始化地图容器
            let map = new Map({
                target: 'mapDiv',
                view: new View({
                    center: [109.43, 33.48],
                    zoom: 7,
                    projection: 'EPSG:4326',
                }),
            }); this.map = map;

            /**地图控件（代码块开始）**/

            //缩放控件
            function addZoomControl() {
                if (map != null) {
                    var zoom = new Zoom()
                    map.addControl(zoom)
                }
            }
            //复位
            function addZoomExtentControl() {
                if (map != null) {
                    var zoomToExtent = new ZoomToExtent({
                        extent: that.myZoomExtent,
                    })
                    map.addControl(zoomToExtent)
                }
            }
            //添加坐标
            function addMousePositionControl() {
                if (map != null) {
                    var mousePositionControl = new MousePosition({
                        //坐标格式
                        coordinateFormat: createStringXY(5),//坐标小数位数
                        //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
                        projection: 'EPSG:4326',
                        //坐标信息显示样式类名，默认是'ol-mouse-position'
                        className: 'custom-mouse-position',
                        //显示鼠标位置信息的目标容器
                        target: document.getElementById('mouse-position'),
                        //未定义坐标的标记
                        undefinedHTML: '&nbsp;',
                    })
                    map.addControl(mousePositionControl)
                }
            }
            //比例尺控件
            function addScaleControl() {
                if (map != null) {
                    //实例化比例尺控件（ScaleLine）
                    var scaleLineControl = new ScaleLine({
                        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
                        units: 'metric',
                        target: 'scaleBar',
                        className: 'ol-scale-line'
                    })
                    map.addControl(scaleLineControl)
                }
            }
            /*集中调用*/
            addZoomControl();
            addZoomExtentControl();
            addMousePositionControl();
            addScaleControl();

            /**地图控件（代码块结束）**/

            //初始化地图文档图层对象
            let mapDocLayer = new Zondy.Map.MapDocTileLayer('', 'Ceshi1', {
                ip: `jlu3s.com`,
                port: `35017`,
            })
            //将地图文档图层加载到地图中
            map.addLayer(mapDocLayer);



        },//end of InitMap()
        F2() {

        },
        F3() {

        },
        F4() {

        },
        F5() {

        },

    },
    created() {

    },
    mounted() {
        // 页面各元素挂载就绪后执行
        this.InitMap();
    },
    watch: {

    },
    computed: {

    }
}
</script>

<style scoped>
/*工具栏-（量测-整饰-控制-查询等）下拉框*/
/*工具栏-（量测-整饰-控制-查询）下拉框-子项*/
.map-tool-item {
    width: 85px;
    height: 29px;
    border-bottom: 1px solid #b4b4b4;
    cursor: pointer;
}

.map-tool-item>img {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 4px;
    margin-left: 5px;
}

.map-tool-item>span {
    display: block;
    float: left;
    width: 50px;
    height: 20px;
    margin-top: 4px;
    margin-left: 2px;
    line-height: 19px;
    text-align: center;
    font-size: 12px;
    font-family: 微软雅黑;
}

/*工具项：整饰-->>对应下拉面板*/
.mapDecorateTools {
    position: relative;
    width: 85px;
    left: 10em;
    background-color: #ffffff;
    box-shadow: 4px 4px 10px #888888;
    z-index: 4;
    /*高于lyrBox的3*/
}

/*地图整饰（坐标、比例尺、图例均通用）*/
.map-decorate {
    position: absolute;
    z-index: 2;
}

/*比例尺位置*/
/*用于覆盖原生比例尺的样式*/
.ol-scale-line {
    background: #f39c12;
    border-radius: 4px;
    bottom: 8px;
    left: -20em;
    /*约等于16px*20=320px*/
    padding: 2px;
    position: absolute;
    height: 26px;
}

.map-scalebar {
    position: absolute;
    bottom: 6px;
    left: 10em;
}

/*坐标位置*/
.map-coordinate {
    left: 315px;
    /*right:105px;*/
    bottom: 15px;
    /*top:10px;*/
    margin: 2px 6px;
    padding: 2px 4px;
    font-family: Arial;
    color: #ffffff;
    background-color: #f39c12;
    /*min-width: 150px;*/
    border-radius: 4px;
    height: 20px;
}

/* 地图容器基本样式 */
.map-display {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: darkgray;
}

/*地图工具栏相关样式  */
.mytool-btns {
    position: relative;
    /*left: 10px;*/
    margin-left: 2.5em;
    top: 10px;
    height: 60px;
    /*width:320px;*/
    /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
    width: 450px;
    /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
}

.navbtn-items {
    float: left;
    margin: 0 5px;
    /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
}

.navBtnDiv {
    /*width: auto;*/
    /*background-color:rgba(0,0,0,0);*/
    margin-left: 55px;
    /*margin-top: 5px;*/
}

.navbtn-btn {
    margin-right: 10px;
}

.navbtn-items:hover {
    cursor: pointer;
}

.navbtn-items>img {
    width: 36px;
    height: 36px;
    padding: 5px;
}

.item-selected {
    position: absolute;
    width: 25px !important;
    height: 25px !important;
    left: 15px !important;
    bottom: 0;
}</style>